import styled from 'styled-components'
import Icon from './Icon'

const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
`

const Top = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .125rem;
    box-sizing: border-box;
`

const Title = styled.span`
    padding: 0 .25rem;
    box-sizing: border-box;
    /* min-width: 6.25rem; */
    text-align: left;
    font-size: .75rem;
    color: ${(prop) => prop.theme.text.coin};
`

const Bottom = styled.div`
    display: flex;
    align-items: center;
`
const SubTitle = styled.span`
    font-size: 2.1875rem;
`

interface Props {
    icon: string;
    title: string;
    subTitle: string;
    action?: {
        title: string;
        onClick?: () => void
    }
}

const Coin: React.FC<Props> = ({ icon, title, subTitle }) => {
    return <Container>
        <Top>
            <Icon
                name={icon}
                width="1.5rem"
            />
            <Title>{title}</Title>
        </Top>
        <Bottom>
            <SubTitle>{subTitle}</SubTitle>
        </Bottom>
    </Container>
}

export default Coin